<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../../../../../../Users/李耀/Desktop/xianyan-1.0/admin/css/font.css">
    <link rel="stylesheet" href="../../../../../../../Users/李耀/Desktop/xianyan-1.0/admin/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="../../../../../../../Users/李耀/Desktop/xianyan-1.0/admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../../../../../../Users/李耀/Desktop/xianyan-1.0/admin/js/xadmin.js"></script>
	
	<link rel="stylesheet" href="../../../../../../../Users/李耀/Desktop/xianyan-1.0/admin/css/simplemde.css">
	<link href="../../../../../../../Users/李耀/Desktop/xianyan-1.0/admin/css/github-markdown.min.css" rel="stylesheet">
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	<!--重写页面需要的样式--->
	<style>
	.layui-input-block{
		margin-left:0px;
		margin-bottom: 25px;
	}
	.fuxuankuang{
		margin-top: 2px;
		padding: 8px 8px 8px 16px;
		width: 480px;
		max-height: 200px;
		background: #FAFAFA;
		border: 1px solid #DDDDDD;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.divfor{
		margin-top: 8px;
		padding: 3px 8px;
		font-size: 12px;
		max-width: 480px;
		background: #e9e9e9;
		border-radius: 2px;
		line-height: 15px;
		height: 21px;
		color: #4f4f4f;
		overflow: hidden;
		white-space: nowrap;
		box-sizing: border-box;
		outline: none;
		float:left;
		margin-left:1px;
		}
	.delectTag,.tagInput,.addTagBtn{
		margin-top: 8px;
		padding: 3px 1px;
		float:left;
		margin-right:3px;
	}
	.tagInput{
		width:20px;
		border:none;
		background: #e9e9e9;
		padding:3px 8px;
	}
	
	.delectTag:hover{
		color:red;
	}
	.divShow{
		margin-bottom:0px;
	}
	.addTagBtn{	
		border: none;
		background: none;
		color: #349EDF;
	}
	
	</style>
 </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
		<div class="x-body">
			<form class="layui-form" id="form" action="">
				
				<div class="layui-input-block">
				  <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
				</div>
				<div class="layui-input-block">
				  <textarea id="fieldTest" cols="30" rows="10"></textarea>
				</div>
				<div class="layui-input-block">
					<select name="interest" id="type">
						<option value="0">选择文章分类</option>
						<option value="1">阅读</option>
					</select>
				</div>
				<div class="layui-input-block divShow">
					<label class="layui-form-label tagShow"style="text-align: left;padding-left:0px;width: 60px;padding-right: 2px;">文章标签</label>
					<tag id="divShow"></tag>
					
					<inputTag id="tagInput" style="display:none;">
						<span id="width_caculator" hidden></span>
						<input class="tagInput" value="">
					</inputTag>
						<button type="button" class="addTagBtn"><i class="layui-icon">&#xe608;</i>   添加新标签</button>
					
				</div>
				
					<div class="layui-input-block fuxuankuang" >
					  <input type="checkbox" name="tagid" lay-filter="formChe" value="1" title="写作">
					  <input type="checkbox" name="tagid" lay-filter="formChe"  value="2" title="阅读">
					  <input type="checkbox" name="tagid" lay-filter="formChe"  value="3" title="游戏">
					  <input type="checkbox" name="tagid" lay-filter="formChe"  value="4" title="chij">

					</div>
				
			<div class="layui-form-item">
				<div class="layui-input-block">
				  <button type="button" class="layui-btn subbtn">立即提交</button>
				  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
			
			</form>
		</div>

    </div>
	<script src="../../../../../../../Users/李耀/Desktop/xianyan-1.0/admin/js/simplemde.js"></script>

<script>

//点击添加按钮的时候 显示 然后获取焦点
$(".addTagBtn").click(function(){
	$("#tagInput").attr("style","display:black");
	$(".tagInput").focus();
})
//失去焦点
$(".tagInput").blur(function(){
	if($(".tagInput").val()!=null&&$(".tagInput").val()!=''){
		$("#divShow").append('<tag><span class="divfor">'+$(".tagInput").val()+'</span><i class="layui-icon delectTag">&#x1006;</i></tag>');
		$("#tagInput").attr("style","display:none");
		$("#form").append('<input class="tagName" name="tagName" type="hidden" value="'+$(".tagInput").val()+'">')
	}else{
		layer.msg("不能为空！")
		$(".tagInput").focus();
	}
})

  
 //根据文本框输入的值 改变input的长度 
  function input_resize(obj){
    $("#width_caculator").html(obj.value)
    $("#width_caculator").css("fontSize", $(obj).css('fontSize'))
	if($("#width_caculator").css('width')=='0px'){
	$(obj).css('width','20px')
	}else{
    $(obj).css('width',$("#width_caculator").css('width'))
	}
}
	$(".tagInput").each(function(event){input_resize(this)});
	$(".tagInput").bind("input propertychange change",function(event){input_resize(this)});


		$(document).on("click",".delectTag",function(){
			var tag = this.parentNode;
			var id = $(tag).attr('id');
			console.log(id);
			if(id==undefined){
			$(tag).remove();
			}else{
			id.substring(3);
			var next = $("input[value="+id+"]").next();
			$("input[value="+id+"]").prop("checked", false);
			
			console.log($("input[value="+id+"]"));
			$(tag).remove();
			layui.form.render('checkbox');	}		
			//tag.setAttribute("style","display:none;"); 

		})


	var simplemde = new SimpleMDE({
		    element: document.getElementById("fieldTest"),
			status: false,
			toolbar: [
            "bold", "italic", "strikethrough", "heading", "code", "quote", "unordered-list",
            "ordered-list", "clean-block", "link", "image", "table", "horizontal-rule", "preview", "side-by-side", "fullscreen", "guide",
            {
                name: "uploadImage",//自定义按钮
                action: function customFunction(editor) {
                    console.log(editor);
                },
                className: "fa fa-star",
                title: "Upload Image"
            }
        ]
    });
	
	layui.use('form', function(){
	  var form = layui.form;
	  
	  form.on('checkbox(formChe)', function(data){
		  console.log(data); //得到checkbox原始DOM对象
		  console.log(data.elem.checked); //是否被选中，true或者false
		  console.log(data.value); //复选框value值，也可以通过data.elem.value得到
		 // console.log(data.othis); //得到美化后的DOM对象
		  console.log(data.elem.title);
		 
		 if(data.elem.checked){
		     if(!($(".layui-form-checked").length>3)){
				$("#divShow").append('<tag id="tag'+data.value+'"><span class="divfor">'+data.elem.title+'</span><i class="layui-icon delectTag">&#x1006;</i></tag>');
			}else{
				console.log($(data.elem))
				$(data.elem).prop("checked", false);
				form.render('checkbox');		
				layer.msg("最多三个")
			}
		}else{
			$("#tag"+data.value).remove();
		  }
		 });   
	});
	
	
	$(".subbtn").click(function(){
		var data = $('#form').serializeArray();
			//获得复选框所有的值
			var arr = new Array();
			$("input:checkbox:checked").each(function(i){
                arr[i] = $(this).val();
            });
			console.log(arr)
			
			var name = new Array();
			$(".tagName").each(function(i){
                name[i] = $(this).val();
            });
			console.log(name)
			
			var testPlain = simplemde.value(), 
			testMarkdown = simplemde.markdown(testPlain);
			layer.msg(testMarkdown);
			
		
	})
</script>
 
  </body>

</html>